iT邦幫忙

2022 iThome 鐵人賽

DAY 13
0
自我挑戰組

鐵人挑戰系列 第 13

Day13-卡路里html設計

  • 分享至 

  • xImage
  •  

Day13

目前應畢業作品要求,需要做一個管理卡路里的程式,目前我設計一個可以輸入:輸入品項 / 食物名稱,卡路里新增,功能有更新MEAL、刪除MEAL,計算總卡路里數。使用html、javaScript製作,我現在的進度是,先設計html。
目前設計內容為此
class名稱為container是把全部內容包覆住的div,而下面的class則是card包裹功能與輸入的內容;class="card-content"包裹裡面的內容,class="card-title"則是輸入品項 / 食物名稱的字串,在裡面第一個class="input-field col s6"裡面包裹著輸入格,type是text可以打字,輸入字串前,有placeholder="餐點名稱"可以在尚未輸入前,顯示餐點名稱,label是物品名稱。第二個class="input-field col s6",裡面包裹著輸入格,type是number可以打數字,輸入數字前,有placeholder="卡路里新增"可以在尚未輸入前,顯示餐點名稱,label是物品-卡路里。剩下的四個按鈕,分別是Add 餐點、更新 Meal、刪除MEAL、Back,而Back則是要連結到之前研究的聊天室中。今日研究暫且告一段落。


上一篇
Day12- html聊天室
下一篇
Day14-卡路里html設計
系列文
鐵人挑戰28
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言